<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width,  target-densitydpi=medium-dpi" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test view</title>
<!-- <link rel="stylesheet" type="text/css" href="/test.css" /> -->
<style type="text/css">
html { }/*.overflow:scroll; .overflow-x:auto;*/
body { font-family:NanumGothic, Malgun Gothic, Dotum; color:#111; font-size:14px; line-height:1em; }
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,button,p,blockquote,th,td {margin:0; padding:0; -webkit-text-size-adjust:none;}
img,fieldset{border:0}
ul,ol,li{list-style:none;}
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
hr {display:none;}
a, a:link {color:#333; text-decoration:none;}
em,i,address {font-style:normal; font-weight:normal;}
legend,caption {display:none; clear:both;}
input,textarea,select,button,table{font-size:inherit;font-family:inherit;line-height:inherit; *font-size:100%; }
textarea, input {outline-color:-moz-use-text-color; outline-style:none; outline-width:medium;}
label { cursor:pointer; }
a:visited { color:#333; }
a:hover, a:active { color:#333; text-decoration:none; }

h1 { margin:20px 0 0 20px;  font-size:20px; }
h2 { margin:20px 0 0 20px; font-size:16px; }
.c-wrap { margin:20px; }
.c-wrap .code { padding:10px; border:1px solid #CCCCCC; background:#FFFFFF; font-family:Tahoma; font-size:9pt; color:#000000;overflow:hidden;word-break:break-all; }
.c-wrap a.view { display:block; width:120px; margin:10px 0 0 0; color:#fff; font-weight:bold; font-size:11px;  text-align:center; padding: 3px 0 4px 0; border:1px solid #ffffff; outline:1px solid #ff2100; text-decoration:none; background-color:#ff2100; }
.browser { margin:20px 0 0 20px; }

table{ margin:20px 0 20px 20px;width:80%;border-collapse:collapse}
/*caption{text-align:left;padding: .5em}
caption a{font-weight:bold}*/
.usage_tbl caption a{text-decoration:none;position:relative;top: -5px;padding:1px}
tbody tr:hover td, tbody tr:hover th{background-color:#b2e1f9; }
th{background-color:#cfb78b;font-weight:normal}
thead th{ color:white; min-width:3em; box-shadow:inset 0 5px 8px rgba(255,255,255,.2);-o-box-shadow:inset 0 5px 8px rgba(255,255,255,.2);-webkit-box-shadow:inset 0 5px 8px rgba(255,255,255,.2);-moz-box-shadow:inset 0 5px 8px rgba(255,255,255,.2)}
thead tr{margin-bottom:2px}

th.ie,th.trident{background-color:#00a0fc; }
th.firefox,th.gecko{background-color:#e68318; }
th.chrome,th.webkit_chr{background-color:#4aac49; }
th.safari,th.webkit_saf{background-color:#a49f9c; }
th.opera,th.presto{background-color:#ca1011; }
th.op_mini,th.op_mob{background-color:#bc211d; }
th.ios_saf{background-color:#a8b0bf; }
th.android{background-color:#97c03b; }
th.op_mini,th.op_mob,th.ios_saf,th.android{font-size: .8em;width:5em}

/*#content th.android{width:2.5em}
#summary thead th{width:auto}
#summary tbody td{font-size:12px}*/

th,td{padding:0.1em}
thead :nth-child(2){-moz-border-radius-topleft:5px;-webkit-border-top-left-radius:5px;border-top-left-radius:5px}
thead :last-child{-moz-border-radius-topright:5px;-webkit-border-top-right-radius:5px;border-top-right-radius:5px}
tbody tr :last-child{border-right:none}
tbody :last-child :last-child{-moz-border-radius-bottomright:5px;-webkit-border-bottom-right-radius:5px;border-bottom-right-radius:5px}
thead th.first{background:none;box-shadow:none;-o-box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none}
thead{}
tbody th, thead th.first { 
	background-image: -o-linear-gradient(0% 100% 0deg,#f4f7f8,#eef6fa,#d6edf8 50%);
	background-image: -moz-linear-gradient(0% 100% 0deg,#f4f7f8,#eef6fa,#d6edf8 50%);
	background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#f4f7f8), to(#eef6fa), color-stop(.5,#d6edf8));
	font-family:'AurulentSansRegular',serif!important; border:1px solid #f0f0f0; text-align:left; width:12em; font-size:13px 
	}
tbody tr.now th{
		background-image: -o-linear-gradient(0% 100% 0deg,#f4f7f8, #80d4d4, #66cccc 50%);
		background-image: -moz-linear-gradient(0% 100% 0deg,#f4f7f8, #80d4d4, #66cccc 50%);
		background-image: -webkit-gradient(linear, 0% 0%, 100% 0%,from(#f4f7f8),to(#80d4d4),color-stop(.5,#66cccc))
	}

/*table#no_details{font-size: .9em;background:#DAC8A7}
table#no_details th a{font-size:1em}td.sum_cell+td+td+td+td+td{font-size:11px}
table#no_details .sum_cell{font-size: .8em}*/

tbody td{ padding:8px 0; text-align:center; border:1px solid #f0f0f0; background-color:#eef6fa; }
tbody td span.res{text-indent: -9999px;width:0;height:0;display:block;float:right}
tbody td span.pre{ float:right; background:#e6ea69; color:black; font-size:8px; padding:0 1px; border-radius:6px; -moz-border-radius:6px; }
table#clone tbody{visibility:hidden;height:0;overflow:hidden}
table#clone{position:fixed;visibility:hidden;top:0;background:none}
table#browser_comparison{margin-bottom:1em}
table#browser_comparison td{padding: .3em}
table#browser_comparison th a{font-size:1em}
table.usage_tbl{float:right;width:150px;font-size:12px}
table.usage_tbl caption{text-align:center;font-weight:bold;padding:2px}
table.usage_tbl td{text-align:right;padding:0 2px}
table.usage_tbl tr + tr + tr td, table.usage_tbl tr + tr + tr th{border-top:3px double #C1A574}
th.feat_cell{padding-left:0.5em;margin-bottom:50px;width:33%}

.now td, .new th{}
.y{ background-color:#fcc1bb; color:#d30e00; }
tr:hover .y{background-color:#fd9085; }
.a, .alt_p .p, .alt_j .j{background-color:#CD5;color:#130}

tr:hover .a, tr:hover .alt_p .p, tr:hover .alt_j .j{background-color:#CC0;color:#130}
.n,.p,.j{background-color:#cede93;color:#556c00;}
tr:hover .n, tr:hover .p, tr:hover .j{background-color:#bce039; }
.u{background-color:#CCC;color:#333}
.n a, #not_ready_note span{font-size: .83em;vertical-align:super;text-decoration:none}

#not_ready_note{border:1px solid #3D3527;font-size: .8em;padding: .5em}

</style>
</head>

<body>
	<h1>Text-Overflow</h1>

	<h2>Example</h2>
	<div class="c-wrap">
		<div class="code">
		.overflow-scroll-test { position:relative; top:70px; width:50%; height:300px; margin:0 auto; padding:10px; border:2px solid #999; background:#fff; overflow:scroll; white-space:nowrap; z-index:9; }<br />
		.header, .footer { position:fixed; width:100%; height:45px; padding-top:5px; text-align:center; z-index:10;<br />
			background-image: -webkit-gradient(<br />
				linear,<br />
				left bottom,<br />
				left top,<br />
				color-stop(0.4, rgb(140,140,140)),<br />
				color-stop(0.92, rgb(227,227,227))<br />
				);<br />
			background-image: -moz-linear-gradient(<br />
				center bottom,<br />
				rgb(140,140,140) 40%,<br />
				rgb(227,227,227) 92%<br />
			);<br />
		}<br />
		.header { top:0; }<br />
		.footer { bottom:0; }
		</div>

		<a href="test_overflow.html" class="view" target="_blank">View ></a>
	</div>

	<h2>Brower Support</h2>

<div style="">
	<table class="main">
		<thead>
			<tr>
				<th class="first"><a onclick="return caniuse.allVersions(this)" href="#">Show all versions</a></th>
				<th class="ie">IE</th>
				<th class="firefox">Firefox</th>
				<th class="safari">Safari</th>
				<th class="chrome">Chrome</th>
				<th class="opera">Opera</th>
				<th class="ios_saf">iOS Safari</th>
				<th class="op_mini">Opera Mini</th>
				<th class="op_mob">Opera Mobile</th>
				<th colspan="2" class="android">Android Browser</th>
			</tr>
		</thead>

		<tbody>
			<tr class="farpast">
				<th>2 versions back</th>
				<td class="y" title="Supported">7.0</td>
				<td class="p" title="Not supported (but has polyfill available)">3.6</td>
				<td class="y" title="Supported">4.0</td>
				<td class="y" title="Supported">10.0</td>
				<td class="y" title="Supported">11.0</td>
				<td class="y" title="Supported">3.2</td><td class=""></td>
				<td class="y x" title="Supported">10.0<span title="Requires this prefix to work" class="pre">-o-</span></td>
				<td colspan="2" class="y" title="Supported">2.1</td>
			</tr>

			<tr class="past">
				<th>Previous version</th>
				<td class="y" title="Supported">8.0</td>
				<td class="p" title="Not supported (but has polyfill available)">4.0</td>
				<td class="y" title="Supported">5.0</td><td class="y" title="Supported">11.0</td>
				<td class="y" title="Supported">11.1</td><td class="y" title="Supported">4.0-4.1</td>
				<td class=""></td>
				<td class="y x" title="Supported">11.0<span title="Requires this prefix to work" class="pre">-o-</span></td>
				<td colspan="2" class="y" title="Supported">2.2</td>
			</tr>

			<tr class="now">
				<th>Current</th>
				<td rowspan="2" class="y" title="Supported">9.0</td>
				<td class="p" title="Not supported (but has polyfill available)">5.0</td>
				<td rowspan="2" class="y" title="Supported">5.1</td>
				<td class="y" title="Supported">12.0</td>
				<td class="y" title="Supported">11.5</td>
				<td class="y" title="Supported">4.2-4.3</td>
				<td class="y x" title="Supported">5.0-6.0<span title="Requires this prefix to work" class="pre">-o-</span></td>
				<td class="y x" title="Supported">11.1<span title="Requires this prefix to work" class="pre">-o-</span></td>
				<td class="y" title="Supported">2.3</td><td class="y" title="Supported">3.0</td>
			</tr>

			<tr class="near">
				<th>Near future</th>
				<td class="p" title="Not supported (but has polyfill available)">6.0</td>
				<td class="y" title="Supported">13.0</td>
				<td class="y" title="Supported">12.0</td>
				<td class=""></td><td class=""></td>
				<td class=""></td><td colspan="2" class=""></td>
			</tr>

			<tr class="far">
				<th>Farther future</th>
				<td class="y" title="Supported">10.0</td>
				<td class="y" title="Supported">7.0</td>
				<td class="y" title="Supported">6.0</td>
				<td class="y" title="Supported">14.0</td>
				<td class="y" title="Supported">12.1</td>
				<td class=""></td>
				<td class=""></td>
				<td class=""></td>
				<td colspan="2" class=""></td>
			</tr>
		</tbody>
	</table>
</div>
</body>
</html>